<!DOCTYPE html>
<html>
  <head>
    <title>学安工间操</title>
    <meta charset="utf-8" />
    <style></style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="style/main.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/adapter-7.4.0.min.js"></script>
    <script type="text/javascript" src="js/winlin.utility.js"></script>
    <script type="text/javascript" src="js/srs.page.js"></script>
    <script src="script/pixi.min.js"></script>
  </head>

  <body>
    <div class="logo">
      <div class="logo_icon_div">
        <!-- <span class="logo_icon_span"> -->
            <img src="images/logo.png" />
        <!-- </span> -->
      </div>
      <div class="logo_name_div">
        <!-- <span class="sys_name"> -->
          <font class="sys_name">学安工间操</font>
          <font class="small">XUEAN WORK_BREAK EXERCISES</font>
        <!-- </span> -->
      </div>
    </div>
    <!--/.logo_con-->
    <div class="video_1_div">
      <video class="video_1" id="rtc_media_player" controls autoplay></video>
    </div>
    <footer class="footer">
      2013-2018 copyright © by Julong Shenzhen, all rights reserved.
    </footer>
    <script src="script/yinhe.js"></script>
    <script type="text/javascript">
      $(function () {
        // Async-await-promise based SRS RTC Player.
        function SrsRtcPlayerAsync() {
          var self = {};
          self.play = async function (url) {
            var conf = self.__internal.prepareUrl(url);
            self.pc.addTransceiver("audio", { direction: "recvonly" });
            self.pc.addTransceiver("video", { direction: "recvonly" });

            var offer = await self.pc.createOffer();
            await self.pc.setLocalDescription(offer);
            var session = await new Promise(function (resolve, reject) {
              // @see https://github.com/rtcdn/rtcdn-draft
              var data = {
                api: conf.apiUrl,
                streamurl: conf.streamUrl,
                clientip: null,
                sdp: offer.sdp,
              };
              console.log("Generated offer: ", data);

              $.ajax({
                type: "POST",
                url: conf.apiUrl,
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
              })
                .done(function (data) {
                  console.log("Got answer: ", data);
                  if (data.code) {
                    reject(data);
                    return;
                  }

                  resolve(data);
                })
                .fail(function (reason) {
                  reject(reason);
                });
            });
            await self.pc.setRemoteDescription(
              new RTCSessionDescription({ type: "answer", sdp: session.sdp })
            );
            return session;
          };

          // Close the publisher.
          self.close = function () {
            self.pc.close();
          };

          // The callback when got remote stream.
          self.onaddstream = function (event) {};

          // Internal APIs.
          self.__internal = {
            defaultPath: "/rtc/v1/play/",
            prepareUrl: function (webrtcUrl) {
              var urlObject = self.__internal.parse(webrtcUrl);

              // If user specifies the schema, use it as API schema.
              var schema = urlObject.user_query.schema;
              schema = schema ? schema + ":" : window.location.protocol;

              var port = urlObject.port || 1985;
              if (schema === "https:") {
                port = urlObject.port || 443;
              }

              // @see https://github.com/rtcdn/rtcdn-draft
              var api =
                urlObject.user_query.play || self.__internal.defaultPath;
              if (api.lastIndexOf("/") !== api.length - 1) {
                api += "/";
              }

              apiUrl = schema + "//" + urlObject.server + ":" + port + api;
              for (var key in urlObject.user_query) {
                if (key !== "api" && key !== "play") {
                  apiUrl += "&" + key + "=" + urlObject.user_query[key];
                }
              }
              // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
              var apiUrl = apiUrl.replace(api + "&", api + "?");

              var streamUrl = urlObject.url;

              return {
                apiUrl: apiUrl,
                streamUrl: streamUrl,
                schema: schema,
                urlObject: urlObject,
                port: port,
              };
            },
            parse: function (url) {
              // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
              var a = document.createElement("a");
              a.href = url
                .replace("rtmp://", "http://")
                .replace("webrtc://", "http://")
                .replace("rtc://", "http://");

              var vhost = a.hostname;
              var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
              var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);

              // parse the vhost in the params of app, that srs supports.
              app = app.replace("...vhost...", "?vhost=");
              if (app.indexOf("?") >= 0) {
                var params = app.substr(app.indexOf("?"));
                app = app.substr(0, app.indexOf("?"));

                if (params.indexOf("vhost=") > 0) {
                  vhost = params.substr(
                    params.indexOf("vhost=") + "vhost=".length
                  );
                  if (vhost.indexOf("&") > 0) {
                    vhost = vhost.substr(0, vhost.indexOf("&"));
                  }
                }
              }

              // when vhost equals to server, and server is ip,
              // the vhost is __defaultVhost__
              if (a.hostname === vhost) {
                var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
                if (re.test(a.hostname)) {
                  vhost = "__defaultVhost__";
                }
              }

              // parse the schema
              var schema = "rtmp";
              if (url.indexOf("://") > 0) {
                schema = url.substr(0, url.indexOf("://"));
              }

              var port = a.port;
              if (!port) {
                if (schema === "http") {
                  port = 80;
                } else if (schema === "https") {
                  port = 443;
                } else if (schema === "rtmp") {
                  port = 1935;
                }
              }

              var ret = {
                url: url,
                schema: schema,
                server: a.hostname,
                port: port,
                vhost: vhost,
                app: app,
                stream: stream,
              };
              self.__internal.fill_query(a.search, ret);

              // For webrtc API, we use 443 if page is https, or schema specified it.
              if (!ret.port) {
                if (schema === "webrtc" || schema === "rtc") {
                  if (ret.user_query.schema === "https") {
                    ret.port = 443;
                  } else if (window.location.href.indexOf("https://") === 0) {
                    ret.port = 443;
                  } else {
                    // For WebRTC, SRS use 1985 as default API port.
                    ret.port = 1985;
                  }
                }
              }

              return ret;
            },
            fill_query: function (query_string, obj) {
              // pure user query object.
              obj.user_query = {};

              if (query_string.length === 0) {
                return;
              }

              // split again for angularjs.
              if (query_string.indexOf("?") >= 0) {
                query_string = query_string.split("?")[1];
              }

              var queries = query_string.split("&");
              for (var i = 0; i < queries.length; i++) {
                var elem = queries[i];

                var query = elem.split("=");
                obj[query[0]] = query[1];
                obj.user_query[query[0]] = query[1];
              }

              // alias domain for vhost.
              if (obj.domain) {
                obj.vhost = obj.domain;
              }
            },
          };

          self.pc = new RTCPeerConnection(null);
          self.pc.onaddstream = function (event) {
            if (self.onaddstream) {
              self.onaddstream(event);
            }
          };

          return self;
        }

        var sdk = null; // Global handler to do cleanup when replaying.
        var startPlay = function () {
          $("#rtc_media_player").show();

          // Close PC when user replay.
          if (sdk) {
            sdk.close();
          }

          sdk = new SrsRtcPlayerAsync();
          sdk.onaddstream = function (event) {
            console.log("Start play, event: ", event);
            $("#rtc_media_player").prop("srcObject", event.stream);
          };

          var url = "webrtc://192.168.1.27/live/test";
          sdk
            .play(url)
            .then(function (session) {
              $("#sessionid").html(session.sessionid);
              $("#simulator-drop").attr(
                "href",
                session.simulator + "?drop=1&username=" + session.sessionid
              );
            })
            .catch(function (reason) {
              sdk.close();
              console.error(reason);
            });
        };

        $("#rtc_media_player").hide();
        $("#rtc_media_player").prop("muted", true);
        startPlay();
      });
    </script>
  </body>
</html>
